<template>
	<view class="container">
		<view>
			<u-tabs-swiper ref="tabs1" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
				swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view class="settingScroll" scroll-y @scrolltolower="onreachBottom">
					<view class="btnStyleHeader">
						<u-button type="primary" plain @click="leakcheck" shape="circle" class="btn"
							size="normal">泄漏检查</u-button>
					</view>
					<view class="settingHeader">
						<u-field class="field" required v-model="settingInfo.startTime" right-icon="arrow-down-fill"
							@click="showPicker" :disabled="true" label-width="200" label="开始时间" placeholder="请选择开始时间"
							style="font-size: 12rpx;" :fieldStyle="fieldStyle">
						</u-field>
						<u-field class="field" required v-model="settingInfo.sampleNo" label-width="200" label="样品编号"
							placeholder="请输入样品编号" style="font-size: 12rpx;" :fieldStyle="fieldStyle">
						</u-field>
					</view>
					<view class="setting" v-if="!settingInfo.customChecked"
						:style="{backgroundColor:settingInfo.customChecked?'#ddd':'#fff'}">
						<u-field class="field" :required="!settingInfo.customChecked"
							v-model="settingInfo.endPressureTxt" right-icon="arrow-down-fill" @click="showSelect"
							:disabled="true" label-width="200" label="结束罐压(psig)" :placeholder="endPressTips"
							style="font-size: 12rpx;" :fieldStyle="fieldStyle">
						</u-field>
						<u-field class="field" :required="!settingInfo.customChecked" v-model="settingInfo.airPressure"
							label-width="200" label="大气压(psig)" :disabled="settingInfo.customChecked"
							:error-message="airError" :placeholder="airTips" @input="onInput" style="font-size: 12rpx;"
							:fieldStyle="fieldStyle">
						</u-field>
						<u-field class="field" :required="!settingInfo.customChecked" v-model="settingInfo.setVolume"
							label-width="200" label="体积(L)" :disabled="settingInfo.customChecked"
							:error-message="volumeError" :placeholder="volumeTips" @input="onVolumeInput"
							style="font-size: 12rpx;" :fieldStyle="fieldStyle">
						</u-field>
						<u-field class="field" :required="!settingInfo.customChecked" v-model="settingInfo.setTime"
							label-width="200" label="时间(h)" :error-message="timeError"
							:disabled="settingInfo.customChecked" :placeholder="timeTips" @input="onTimeInput"
							style="font-size: 12rpx;" :fieldStyle="fieldStyle">
						</u-field>
					</view>
					<view class="setting" :style="{backgroundColor:settingInfo.customChecked?'#fff':'#ddd'}">
						<u-field class="field" label="自定义设置" label-width="180" prop="customChecked"
							style="font-size: 12rpx;" :fieldStyle="fieldStyle">
							<template v-slot:right>
								<u-switch @change="customChange" style="margin-right: 550rpx;"
									v-model="settingInfo.customChecked" active-color="red" inactive-color="#eee"
									size="30"></u-switch>
							</template>
						</u-field>
						<u-field v-if="settingInfo.customChecked" class="field" :required="settingInfo.customChecked"
							v-model="settingInfo.customFlow" label-width="200" :disabled="!settingInfo.customChecked"
							label="流速(mL/min)" :error-message="customFlowError" :placeholder="customFlowTips"
							@input="onCustomFlowInput" style="font-size: 12rpx;" :fieldStyle="fieldStyle">
						</u-field>
						<u-field v-if="settingInfo.customChecked" class="field" :required="settingInfo.customChecked"
							v-model="settingInfo.customTime" label-width="200" :disabled="!settingInfo.customChecked"
							label="时间(h)" :placeholder="customTimeTips" @input="onCustomTimeInput"
							:errorMessage="customTimeError" style="font-size: 12rpx;" :fieldStyle="fieldStyle">
						</u-field>

					</view>
					<view class="settingHeader">
						<u-field class="field" v-model="settingInfo.windSpeed" label-width="200" label="风速(m/s)"
							placeholder="请输入风速" style="font-size: 12rpx;" @input="onWindSpeedInput"
							:errorMessage="windSpeedError" :fieldStyle="fieldStyle">
							<template v-slot:right>
								<u-button size="mini" type="warning" @click="readWeather">读取</u-button>
							</template>
						</u-field>
						<u-field class="field" v-model="settingInfo.windDirection" label-width="200" label="风向"
							placeholder="请输入风向" style="font-size: 12rpx;" :fieldStyle="fieldStyle">
						</u-field>
						<u-field class="field" v-model="settingInfo.temperature" label-width="200" label="温度(℃)"
							placeholder="请输入温度" style="font-size: 12rpx;" @input="onTemperatureInput"
							:errorMessage="temperatureError" :fieldStyle="fieldStyle">
						</u-field>
						<u-field class="field" v-model="settingInfo.humidity" label-width="200" label="湿度(RH%)"
							placeholder="请输入湿度" style="font-size: 12rpx;" @input="onHumidityInput"
							:errorMessage="humidityError" :fieldStyle="fieldStyle">
						</u-field>
						<u-field v-if="settingInfo.customChecked" class="field" v-model="settingInfo.airPressure"
							label-width="200" label="大气压(psig)" :error-message="airError" :placeholder="airTips"
							@input="onInput" style="font-size: 12rpx;" :fieldStyle="fieldStyle">
						</u-field>
					</view>
					<view class="btnStyle">
						<u-button :type="isLeakSuccess?'success':'warning'" plain @click="sendPara"
							:disabled="!isLeakSuccess" shape="circle" class="btn" size="normal">下发参数</u-button>
					</view>
					<u-picker mode="time" v-model="show" :defaultTime="settingInfo.startTime" :params="params"
						@confirm="confirmTime" @cancel="cancelTime"></u-picker>
					<u-select v-model="showEndPress" mode="single-column" :list="listEndPress"
						@confirm="confirmEndPress" @cancel="cancelEndPress"></u-select>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="settingHeader" style="margin-top: 40rpx;">
					<u-field class="field" v-model="deviceName" label-width="200" label="修改名称" placeholder="请填写设备名称"
						style="font-size: 12rpx;" :fieldStyle="fieldStyle">
						<template v-slot:right>
							<u-button size="mini" type="success" @click="eidtName">确认</u-button>
						</template>
					</u-field>
				</view>
				<view class="btnStyleHeader">
					<u-button type="primary" plain @click="sweepSys" shape="circle" class="btn"
						size="normal">吹扫系统</u-button>
				</view>
				<scroll-view scroll-y class="settingScroll" @scrolltolower="onreachBottom">
					<view class="u-content">
						<u-divider>交互信息</u-divider>
						<u-parse :html="msg" class="msg"></u-parse>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">

				<view class="calibration">
					<view class="btnCaliView">
						<u-button size="mini" type="success" class="btnCali">标定</u-button>
						<u-button size="mini" type="success" class="btnCali">反标</u-button>
						<u-button size="mini" type="success" class="btnCali">清空参数</u-button>
						<u-button size="mini" type="success" class="btnCali">读取参数</u-button>
						<u-button size="mini" type="success" class="btnCali">实际流速</u-button>
						<u-button class="btnCaliPlaceholder"></u-button> <!-- 占位按钮 -->
					</view>
					<view class="row1">
						<text class="txt">泄漏检查阈值:</text>
						<u-input type="digit" :border="true" height="50" class="input" placeholder=""></u-input>
						<u-button size="mini" class="btnCaliTwo" type="success">确定</u-button>
					</view>
					<view class="row2">
						<text class="txt">设置流速:</text>
						<u-input type="digit" :border="true" height="50" class="input" placeholder=""></u-input>
						<u-button size="mini" class="btnCaliTwo" type="success">确定</u-button>
					</view>
					<view class="row3">
						<text class="txt">0-10系数:</text>
					</view>
					<view class="row33">
						<text>A</text>
						<u-input type="digit" :border="true" height="50" class="input" placeholder=""></u-input>
						<text>B</text>
						<u-input type="digit" :border="true" height="50" class="input" placeholder=""></u-input>
						<text>C</text>
						<u-input type="digit" :border="true" height="50" class="input" placeholder=""></u-input>
						<u-button size="mini" type="success" class="btnCaliTwo">确定</u-button>
					</view>
					<view class="row4">
						<text class="txt">10-45系数:</text>
					</view>
					<view class="row44">
						<text>A</text>
						<u-input type="digit" :border="true" height="50" class="input" placeholder=""></u-input>
						<text>B</text>
						<u-input type="digit" :border="true" height="50" class="input" placeholder=""></u-input>
						<text>C</text>
						<u-input type="digit" :border="true" height="50" class="input" placeholder=""></u-input>
						<u-button size="mini" type="success" class="btnCaliTwo">确定</u-button>
					</view>
					<view class="row5">
						<text class="txt">压力系数:</text>

						<text>A</text>
						<u-input type="digit" :border="true" height="50" class="input" placeholder=""></u-input>
						<text>B</text>
						<u-input type="digit" :border="true" height="50" class="input" placeholder=""></u-input>
						<u-button size="mini" type="success" class="btnCaliTwo">确定</u-button>
					</view>
					<scroll-view scroll-y class="settingScroll" @scrolltolower="onreachBottom">
						<view class="u-content2">
							<u-divider>交互信息</u-divider>
							<rich-text :nodes="msgCali"></rich-text>
						</view>
					</scroll-view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fieldStyle: {
					'font-size': '24rpx',
				},
				flowValue: 0.1,
				deviceId: '3037',
				deviceName: 'VOC实验室I',
				msg: '<p>露从今夜白，月是故乡明</p>',
				msgCali: '<p>露从今夜白，月是故乡明</p>',
				listEndPress: [{
						value: -1.5,
						label: '-1.5 (±0.75)'
					},
					{
						value: -2,
						label: '-2 (±0.75)'
					},
					{
						value: -2.5,
						label: '-2.5 (±0.75)'
					},
					{
						value: -3,
						label: '-3 (±0.75)'
					},
					{
						value: -3.5,
						label: '-3.5 (±0.75)'
					}
				],
				list: [{
					name: '实验设置'
				}, {
					name: '更多设置'
				}, {
					name: '设备校准'
				}],
				current: 0,
				swiperCurrent: 0,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				show: false,
				showEndPress: false,
				windSpeedError: '',
				temperatureError: '',
				humidityError: '',
				airError: '',
				volumeError: '',
				timeError: '',
				customFlowError: '',
				customTimeError: '',
				endPressTips: '',
				airTips: '',
				volumeTips: '',
				timeTips: '',
				customFlowTips: '',
				customTimeTips: '',
				settingInfo: {
					startTime: '',
					endPressureTxt: '',
					sampleNo: '',
					endPressure: null,
					airPressure: -14.7,
					setVolume: null,
					setTime: null,
					customTime: null,
					customFlow: null,
					customChecked: false,
					temperature: null,
					humidity: null,
					windSpeed: null,
					windDirection: ''
				},
				isLeakSuccess: true
			};
		},
		onLoad(option) {
			this.deviceId = option.deviceId;
			uni.setNavigationBarTitle({
				title: `设备设置-${this.deviceId}`
			});
			console.log(option.deviceId);
			// if (this.$globalState.S1600Info.RoleID != 2)
			// 	this.list = this.list.splice(0, 2);
		},
		onReady() {
			this.$checkLogin();
			this.settingInfo.startTime = this.$Util.GetCurrentTime()
			this.settingInfo.customChecked = false;
			this.tipsChange(this.settingInfo.customChecked);
		},
		methods: {
			readWeather() {
				console.log('读取天气参数');
			},
			sweepSys() {
				console.log('吹扫系统');
			},
			eidtName() {
				console.log(this.deviceName);
				if (!this.deviceName) {
					this.$u.toast('名称不可为空');
					return;
				}
				this.$request('Device/EditDeviceName', 'POST', {
					"deviceID": this.deviceId,
					"name": this.deviceName,
					"userCode": this.$globalState.S1600Info.UserCode
				}).then(res => {
					console.log(res)
					this.$u.toast(res.message)
				}).catch(error => {
					console.log(error)
					this.$u.toast('服务器异常，请联系管理员')
				})
			},
			checkInput() {
				let now = new Date(this.$Util.GetCurrentTime());
				let selectDate = new Date(this.settingInfo.startTime);
				if (selectDate <= now) {
					this.$u.toast('开始时间不可小于当前时间')
					return false;
				}
				if (!this.settingInfo.sampleNo) {
					this.$u.toast('样品编号不可为空')
					return false;
				}
				if (!this.settingInfo.customChecked) {
					if (!this.settingInfo.endPressure) {
						this.$u.toast('结束罐压不可为空')
						return false;
					}
					if (!this.settingInfo.airPressure) {
						this.$u.toast('大气压不可为空')
						return false;
					}
					if (!this.settingInfo.setVolume) {
						this.$u.toast('体积不可为空')
						return false;
					}
					if (!this.settingInfo.setTime) {
						this.$u.toast('时间不可为空')
						return false;
					}
				} else {
					if (!this.settingInfo.customFlow) {
						this.$u.toast('自定义流速不可为空')
						return false;
					}
					if (!this.settingInfo.customTime) {
						this.$u.toast('自定义时间不可为空')
						return false;
					}
				}
			},
			sendPara() {
				if (!this.checkInput())
					return;
				//下发参数
				this.$request('Device/AddSampleData', 'POST', {

				}).then(res => {
					console.log(res)
				})
			},
			leakcheck() {
				//需要进行泄漏检查	
			},
			tipsChange(e) {
				this.endPressTips = e ? '' : '请选择结束罐压';
				this.airTips = e ? '' : '请输入大气压';
				this.volumeTips = e ? '' : '请输入体积';
				this.timeTips = e ? '' : '请选择时间';
				this.customFlowTips = e ? '请输入自定义流速' : '';
				this.customTimeTips = e ? '请输入自定义时间' : '';
			},
			customChange(status) {
				console.log(status);
				this.settingInfo.customChecked = status;
				this.tipsChange(this.settingInfo.customChecked);
			},
			onWindSpeedInput(value) {
				const regex = /^\d*\.?\d{0,1}$/;
				if (regex.test(value) || value === '') {
					console.log(regex.test(value))
					this.windSpeedError = '';
					this.settingInfo.windSpeed = value === '' ? null : parseFloat(value);
				} else {
					this.windSpeedError = '一位小数的数字';
				}
			},
			onTemperatureInput(value) {
				const regex = /^\d*\.?\d{0,1}$/;
				if (regex.test(value) || value === '') {
					console.log(regex.test(value))
					this.windSpeedError = '';
					this.settingInfo.windSpeed = value === '' ? null : parseFloat(value);
				} else {
					this.windSpeedError = '一位小数的数字';
				}
			},
			onHumidityInput(value) {
				const regex = /^\d*\.?\d{0,1}$/;
				if (regex.test(value) || value === '') {
					console.log(regex.test(value))
					this.windSpeedError = '';
					this.settingInfo.windSpeed = value === '' ? null : parseFloat(value);
				} else {
					this.windSpeedError = '一位小数的数字';
				}
			},
			onCustomFlowInput(value) {
				const regex = /^\d*\.?\d{0,1}$/;
				if (regex.test(value) || value === '') {
					console.log(regex.test(value))
					if (value != '' && (parseFloat(value) > 99 || parseFloat(value) < 0.1)) {
						this.customFlowError = '自定义流速范围[0.1,99]';
					} else {
						this.customFlowError = '';
						this.settingInfo.customFlow = value === '' ? null : parseFloat(value);
					}
				} else {
					this.customFlowError = '一位小数的数字';
				}
			},
			onCustomTimeInput(value) {
				const regex = /^\d*\.?\d{0,1}$/;
				if (regex.test(value) || value === '') {
					console.log(regex.test(value))
					if (value != '' && (parseFloat(value) > 999 || parseFloat(value) < 0.1)) {
						this.customTimeError = '自定义时间范围[0.1,999]';
					} else {
						this.customTimeError = '';
						this.settingInfo.customTime = value === '' ? null : parseFloat(value);
					}
				} else {
					this.customTimeError = '一位小数的数字';
				}
			},
			onVolumeInput(value) {
				const regex = /^\d*\.?\d{0,1}$/;
				if (regex.test(value) || value === '') {
					console.log(regex.test(value))
					if (value != '' && (parseFloat(value) > 32 || parseFloat(value) <= 0)) {
						this.volumeError = '体积范围(0,32]';
					} else {
						this.volumeError = '';
						this.settingInfo.setVolume = value === '' ? null : parseFloat(value);
					}
				} else {
					this.volumeError = '一位小数的数字';
				}
			},
			onTimeInput(value) {
				const regex = /^\d*\.?\d{0,1}$/;
				if (regex.test(value) || value === '') {
					if (value != '' && (parseFloat(value) > 168 || parseFloat(value) < 0.1)) {
						this.timeError = '时间范围[0.1,168]';
					} else {
						this.timeError = '';
						this.settingInfo.setTime = value === '' ? null : parseFloat(value);
					}

				} else {
					this.timeError = '一位小数的数字';
				}
			},
			onInput(value) {
				const regex = /^-?\d*\.?\d{0,1}$/;
				if (regex.test(value) || value === '') {
					console.log(regex.test(value))
					this.airError = '';
					this.settingInfo.airPressure = value === '' ? null : parseFloat(value);
				} else {
					this.airError = '一位小数的数字';
				}
			},
			confirmEndPress(e) {
				this.settingInfo.endPressureTxt = e[0].label;
				this.settingInfo.endPressure = e[0].value;
				console.log(this.settingInfo.endPressure)
			},
			cancelEndPress(e) {
				this.settingInfo.endPressureTxt = '';
				this.settingInfo.endPressure = null;
			},
			confirmTime(e) {
				console.log(e)
				this.settingInfo.startTime =
					`${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
			},
			cancelTime(e) {
				this.settingInfo.startTime = '';
			},
			showPicker() {
				this.show = true;
			},
			showSelect() {
				if (this.settingInfo.customChecked)
					return;
				this.showEndPress = true;
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.tabs1.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.tabs1.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				console.log('到达底部')
			}
		}
	};
</script>

<style lang="scss" scoped>
	.btnCaliView {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
		margin: 20rpx 20rpx 0rpx 20rpx;
	}

	.btnCaliPlaceholder {
		width: calc((100% - 40rpx) / 3);
		height: 0;
		visibility: hidden;
	}

	.btnCali {
		width: calc((100% - 40rpx) / 3);
		;
		margin-bottom: 20rpx;
		/* 第一行和第二行之间的间距 */
	}

	.btnCaliTwo {
		width: 150rpx;
	}

	.row,
	.row1,
	.row2,
	.row3,
	.row4,
	.row33,
	.row44,
	.row5 {
		margin-top: 10rpx;
		margin-left: 20rpx;
		padding-right: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		padding-left: 10rpx;
		height: 70rpx;
		//border: solid 1rpx #00ff00;
		width: 95%;
	}

	.row1 {
		width: 520rpx;
	}

	.row2 {
		width: 520rpx;
	}



	.input {
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.txt {
		width: 180rpx;
	}

	.u-content,
	.u-content2 {
		height: 100%;
		width: 100%;
		margin-top: 50rpx;
		color: $u-content-color;
		font-size: 16rpx;
		line-height: 1.8;

		// 标签形式无效
		p {
			color: $u-tips-color;
		}
	}

	.u-content2 {
		margin-left: 60rpx;
		width: 85%;
	}

	.msg {
		padding-left: 60rpx;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
	}


	.swiper {
		height: 100%;
	}

	.swiper-item {
		height: 100%;
		display: flex;
		flex-direction: column;

	}

	.settingScroll {
		height: 100%;
		width: 100%;
		// border: solid 1rpx #ff0000;
	}

	.settingHeader {
		margin: 0 50rpx;
		border: solid 1rpx #383838;
		border-radius: 20rpx;
	}

	.setting {
		margin: 20rpx 50rpx;
		border: solid 1rpx #383838;
		border-radius: 20rpx;
	}

	.btnStyle,
	.btnStyleHeader {
		margin: 30rpx 50rpx 10rpx 50rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
	}

	.btn {
		/* 设置按钮高度 */
		height: 70rpx;
		width: 100%;
		font-size: 24rpx;
	}

	.field {
		height: 80rpx;

		/* 调整高度 */
	}
</style>